<template>
	<div class="body">
		<div :class="['left_item_container',{'left_item.active' : UpdateIndex === index}]" @click="Onclick">
			{{item.name}}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			},
			UpdateIndex: {
				type: Number
			},
			index: {
				type: Number
			}
		},
		methods:{
			Onclick(){
				this.$emit("ChangeUpdateIndex",this.index)
			}
		}
	}
</script>

<style scoped>
	.left_item_container {
		width: 100%;
		height: 50px;
		border: 1px solid red;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	
	.lefy_item_active
	{
		border-left: 3px solid deeppink;
	}
</style>
